<template>
  <!-- 处理风险广告 -->
  <div class="handle-risk-wrap">
    <a-form ref="formRef" :model="formVal" :rules="rules">
      <a-form-item field="operationsType" label="处理方式：">
        <a-radio-group v-model="formVal.operationsType">
          <a-radio value="ADJUST">调整广告</a-radio>
          <a-radio value="PAUSE">暂停广告</a-radio>
          <a-radio value="CANCEL">取消风险标识</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item v-if="formVal.operationsType == 'ADJUST'" field="operationsAdjustDetail" label="处理明细：">
        <a-checkbox-group v-model="formVal.operationsAdjustDetail">
          <a-checkbox value="KEYWORD">调整关键词</a-checkbox>
          <a-checkbox value="BID">调整竞价</a-checkbox>
          <a-checkbox value="BUDGET">调整预算</a-checkbox>
        </a-checkbox-group>
      </a-form-item>
      <a-form-item field="remarks" label="备注：">
        <a-textarea v-model="formVal.remarks" allow-clear />
      </a-form-item>
    </a-form>
    <div class="flex-c-end" style="margin-top: 30px">
      <a-space>
        <a-button @click="cancelHandle">取消</a-button>
        <a-button type="primary" :loading="submitLoading" @click="submitData">确认</a-button>
      </a-space>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { operationsAdjust } from '@/api/advert'
  import { Message } from '@arco-design/web-vue'

  const props = defineProps({
    adList: {
      type: Array,
      default: () => [],
    },
  })
  const emit = defineEmits(['cancel', 'success'])

  const rules = ref({
    operationsType: [{ required: true, message: '请选择处理方式' }],
    operationsAdjustDetail: [{ required: true, message: '请选择处理明细' }],
  })
  const formRef = ref()
  const formVal = ref<any>({
    operationsType: 'ADJUST',
  })
  const submitLoading = ref(false)
  // 取消
  function cancelHandle() {
    emit('cancel')
  }
  // 确认处理风险
  async function submitData() {
    let valid = await formRef.value.validate((valid: any) => {
      return valid
    })
    if (valid) return false
    let riskUniqueInfos = props.adList.map((el: any) => {
      return {
        adType: el.adType,
        campaignId: el.campaignId,
        companyId: el.companyId,
        resourceId: el.resourceId,
        shopId: el.shopId,
        targetingType: el.targetingType,
      }
    })
    let _params: any = {
      operationsType: formVal.value.operationsType,
      remarks: formVal.value.remarks,
      riskUniqueInfos: riskUniqueInfos,
    }
    // 调整广告的时候需要选择明细
    if (formVal.value.operationsType == 'ADJUST') {
      _params.operationsAdjustDetail = formVal.value.operationsAdjustDetail?.join(',')
    }
    submitLoading.value = true
    let res: any = await operationsAdjust(_params)
    submitLoading.value = false
    if (res) {
      Message.success('操作成功')
      emit('success')
    }
  }
</script>

<style lang="less" scoped></style>
